<template>
  <div class="page-index">
    <div class="section">
      <img class="logo" src="/static/images/nbut.jpg" alt="">
      <p>授权后，小程序将获得您的公开信息(昵称，头像，地区及性别)</p>
      <button
        class="auth-btn"
        open-type="getUserInfo"
        @getuserinfo="auth"
      >授权</button>
    </div>
  </div>
</template>

<script>
import { mapActions } from'vuex';
export default {
  data () {
    return {
    }
  },
  computed: {
  },
  methods: {
    ...mapActions(['getSession']),
    auth(res) {
      if (res.mp.detail.encryptedData) {
        mpvue.getUserInfo({
          success: (res) => {
            const nick = res.userInfo.nickName;
            mpvue.login({
              success: (res) => {
                const code = res.code;
                // 授权接口调用
                this.getSession({
                  code: code,
                  nick: nick,
                });
              },
              fail: (err) => {
                mpvue.showToast({
                  title: '授权失败，请重试',
                  icon: 'none'
                });
              }
            });
          },
          fail: (err) => {
            mpvue.showToast({
              title: '授权失败，请重试',
              icon: 'none'
            });
          }
        });
      }
    }
  },

  created () {
    let app = getApp();
  }
}
</script>

<style lang="scss" scoped>
.page-index {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
.section {
  padding-top: 90rpx;
  text-align: center;
  .logo {
    width: 300rpx;
    height: 300rpx;
    padding: 50rpx 0;
  }
  p {
    font-size: 24rpx;
    color: #333333;
    margin-bottom: 50rpx;
  }
  .auth-btn {
    display: block;
    width: 690rpx;
    margin: 0 auto;
    color: #ffffff;
    font-size: 32rpx;
    background: #0d59a5;
  }
}

</style>
